//导航类
class navC {

    http = 'http://localhost:3000';
    navli = document.querySelectorAll('.nav2');
    navspan = document.querySelectorAll('.nav2span');
    navli2 = document.querySelectorAll('.nav3');
    navspan2 = document.querySelectorAll('.nav2span1');
    fixed = document.querySelector('#fixed');
    body = document.querySelector('body');


    constructor() {
            // console.log(this.fixed);
            // console.log(this.body);
            // console.log(this.scrollTop);
            // console.log(this.navli, this.navspan);
            this.navli.forEach((ele, key) => {
                // console.log(ele, key);
                ele.onmouseover = this.liover.bind(this, key);

            })
            this.navli2.forEach((ele, key) => {
                // console.log(ele, key);
                ele.onmouseover = this.liover.bind(this, key);

            })



            //上栏导航滚动事件
            this.body.onscroll = this.bodyscroll;


        }
        //li移入事件

    liover(key) {

            this.spanhtml(key);
        }
        //向span中添加数据
    spanhtml(key) {
        //当鼠标移入第一个'居家生活'导航时获取的数据
        //向内容函数传入key和id值
        if (key == 0) this.content(key, 'home');
        if (key == 1) this.content(key, 'clothing');
        if (key == 2) this.content(key, 'cate');
        if (key == 3) this.content(key, 'clean');
        if (key == 4) this.content(key, 'baby');
        if (key == 5) this.content(key, 'sports');
        if (key == 6) this.content(key, 'wiring');
        if (key == 7) this.content(key, 'selection');





    }

    //二级菜单内容函数
    async content(key, id) {
        let res = await axios.get(this.http + '/' + id);
        let data = res.data;
        let html = '';
        // console.log(data);


        data.forEach((ele) => {
                // console.log(ele);
                html +=
                    `<div class="fload">
            <h4 class=".nav2h4">${ele.title}</h4>
        <ul >
        <li>${ele.labal}</li>
        <li>${ele.labal1}</li>
        <li>${ele.labal2}</li>
        <li>${ele.labal3}</li>
        <li>${ele.labal4}</li>
        <li>${ele.labal5}</li>
        </ul>
        </div>
        `
                this.navspan[key].innerHTML = html;
                this.navspan2[key].innerHTML = html;

            })
            //设置内容的宽度排列
        let fload = document.querySelectorAll('.fload');
        //求出数据的长度
        let floadss = data.length;
        //遍历数组,给每个fload设置宽度
        fload.forEach((e) => {

            // console.log(e);
            e.style.width = 1000 / floadss + 'px';
        })

    }

    //鼠标滚动事件
    bodyscroll() {
        //页面滚动监听导航
        let scrollTop = document.documentElement.scrollTop;
        // console.log(scrollTop);
        if (scrollTop > 200) {
            this.fixed.style.display = 'block';

        } else {
            this.fixed.style.display = 'none';

        }
    }


}
new navC();




//浏览页

class bro {
    browsediv = document.querySelector('.browse1');

    http = 'http://localhost:3000';


    constructor() {


        this.html1('browse');
        this.html1('browse1');
        this.html1('browse2');


    }

    async html1(id) {
        let { data, status } = await axios.get(this.http + '/' + id);

        let div = document.createElement('div');
        this.browsediv.appendChild(div);
        div.style.height = "100%";
        console.log(this.browsediv);
        let div2 = document.createElement('div');
        div.appendChild(div2);
        let div3 = document.createElement('div');
        div.appendChild(div3);
        div3.classList.add('new');
        div3.style.height = '800px';
        let div4 = document.createElement('div');
        div3.appendChild(div4);
        div4.classList.add('banxin', 'new1');
        div4.style.flexWrap = "wrap";

        div2.innerHTML += `

        <div style="text-align: center;margin: 20px 0;" id="browse2">

            <h3>${data[0].h4}</h3>

            <h5 style="margin: 20px 0 30px; color: #888888;">${data[0].h5}</h5>

        </div>
        `;


        for (let i = 1; i < data.length; i++) {

            div4.innerHTML +=
                `
                        <div class="new1child" style="margin-top:20px">
                            <p>
                                <img src="${data[i].src1}" alt="" style="width: 100%;">
                                <img src="${data[i].src2}" alt="" class="new2" style="width: 100%;">
                            </p>
                            <p>${data[i].h1}</p>
                            <p class="new1red">${data[i].many}</p>
                            <p style="color: #888888;margin-top: 10px;border-top: 1px solid #cfcece; padding-top: 10px;">${data[i].h2}</p>

                        </div>

                `
        }

        let  new1child=document.querySelectorAll('.new1child');
        new1child.forEach((i)=>{
            i.onclick=function(){

                location.assign('./details.html');

            }

        })

    }

}
new bro;